<template>
  <!-- <div style="overflow: hidden" draggable="true">
    <img :src="propValue" />
  </div> -->

  <div @dragstart="handleDragStart" class="component-list">
    <div
      v-for="(item, index) in componentList"
      :key="index"
      class="list"
      draggable="true"
      :data-index="index"
    >
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps({
  propValue: {
    type: String,
    required: true,
  },
});

const componentList = [1, 2, 3, 4, 5, 6, 6];

const handleDragStart = (e: any) => {
  console.log("e :>> ", e);
  e.dataTransfer.setData("index", e.target.dataset.index);
};
</script>
